<template>
<div id="app">
    <div class="container">
        <div class="close"><span class="iconfont iconicon-test"></span></div>
        <div class="logo"><span class="iconfont iconnew"></span></div>
        <div class="inputs">
            <!-- <input placeholder="请输入手机号" class="input">
            <input placeholder="密码" class="input" type="password"> -->
            <!-- 
                通过value属性传值给子组件
                
                自定义组件：当我们给自定义组件设置属性的时候，
                这个属性会自动成为组件内根标签的属性。
                （注意：这个属性必须不在子组件的props中，还有一些特殊属性也不会成为子组件根标签的属性，比如id。）
                
                v-model:
                    作用1：双向绑定表单元素的value属性
                    作用2：v-model会自动绑定并接收input事件传递过的值，
                    并且值把同步给v-model绑定的变量

                这里v-model做了两件事件
                    1、将username传递给子组件（相当于之前的v-bind:value="user.username"
                    2、自动绑定了input事件(相当于之前写的@getData="setUsername")
             -->
            <hmInput 
            ref="username"
            :reg="/^[1][3,4,5,7,8,9][0-9]{9}$/" 
            placeholder="请输入手机号码" 
            v-model="user.username"></hmInput>
            <hmInput type="password" ref="password" placeholder="请输入密码"
             v-model="user.password"
             ></hmInput>
        </div>
        <p class="tips">
            没有账号？
            <a href="#/register" class="">去注册</a>
        </p>
        <!-- <div class="button">登录按钮</div> -->
        <van-button round block icon="star-o" type="danger" @click="loginFn">登录</van-button>
    </div>
</div>
</template>

<script>
import hmInput from "../components/hmInput.vue"
import { login } from "../api/user.js"
export default {
    components: { 
        hmInput
    },
    data(){
        return {
            user: {
                username: "", // 手机号码
                password: "" // 密码
            }
        }
    },
    methods: {
        // 登录
        loginFn(){
            // 我们可以通过ref属性获取到子组件，再通过获取到的子组件拿到里面的isOk属性
            console.log("获取到了组件对象中的isOk属性", this.$refs.username.isOk );
            // console.log(60,this.user);
            if(!this.$refs.username.isOk){
                this.$toast.fail("手机号码输入不正确！")
                return
            }
            // console.log(this.$refs.password.isOk);
            if(!this.$refs.password.isOk){
                this.$toast.fail("密码不能为空！")
                return
            }
            // 添加加载效果
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true,
                duration: 0     // 表示不关闭加载弹窗
            });
            // 登录请求
            login(this.user).then(res=>{
                console.log(63,res);
                // 判断是否登录成功，如果登录成功跳转到首页
                if(res.data.message == "用户不存在"){
                    // 全局注册的组件，使用的时候需要通过this调用
                    this.$toast.fail(res.data.message);
                }else{
                    this.$toast.success(res.data.message);
                    // 缓存token和用户id
                    localStorage.setItem("token-70",res.data.data.token);
                    localStorage.setItem("userId-70",res.data.data.user.id);
                    // 登录成功 跳转到首页
                    
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    padding: 20px;
}
.close {
    span {
        font-size: (27 / 360) * 100vw;
    }
}
.logo {
    display: flex;
    justify-content: center;

    span {
        display: block;
        font-size: (126 / 360) * 100vw;
        color: #d81e06;
    }
}
.inputs {
    input {
        margin-bottom: 20px;
    }
}
.tips {
    text-align: right;
    margin-bottom: 20px;
    a {
        color: #3385ff;
    }
}
</style>